<script setup>
import {ElSpace,ElCard,ElCol,ElRow,ElSkeleton,ElSkeletonItem,ElButton} from "element-plus";
import MediaStore from "../../store/MediaStore.js";
import uploadStore from "../../store/upload.js";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router"
const uploadstore = uploadStore();
const store = MediaStore();
const router = useRouter();
// 挂载时初始化一次
onMounted(async ()=> {
  const state = ref(false);
  const isFlash = uploadstore.updateFlash["image"];

  await store.getEntry({isFlash})
      .then(()=>{
        state.value = true;
      })
      .catch(err=>console.log(err));
  if(state.value){
    uploadstore.updateFlash["image"] = false;
    state.value = false;
  }
})

const viewPic = (id)=>router.push({
  path:"/media/show",
  query:{
    type:`image`,
    id,
  }
})

</script>

<template>
  <el-row>
    <el-col v-for="(v,i) in store.currentEntry" :key="i" :span="6">
      <!--骨架屏-->
      <el-skeleton style="width: 240px" :loading="false" animated>
        <template #template>
          <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
        </template>
        <template #default>
          <el-card @click="viewPic(v.id)"  class="image-card"  body-class="image-content" footer-class="image-footer"  >
            <template #default>
              <img :src="`http://localhost:3000/preview/image/stream?id=${v.id}`" width="100%" />
            </template>
            <template #footer>
              <el-text tag="b">{{v.filename}}</el-text>
            </template>
          </el-card>
        </template>
      </el-skeleton>

    </el-col>
  </el-row>
</template>

<style>
.image-card {
  width: 94%;
  cursor: pointer;
  margin-top: 16px;
  background-color: rgba(255,255,255,.4);
  border:0px solid transparent;
}
.image-content {
  padding: 0;
  width:100%;
  height:180px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: burlywood;

}
.image-footer{
  margin:0;
  padding:2px;
  background-color: black;
  color:#fff;
  text-align: center;

}
</style>